<template>
  <v-dialog v-model="loginFlag" :fullscreen="isMobile" max-width="460">
    <v-card class="login-container" style="border-radius:4px">
      <v-icon class="float-right" @click="loginFlag = false">
        mdi-close
      </v-icon>
      <div class="login-wrapper">
        <!-- 用户名 -->
        <v-text-field
            v-model="form.username"
            label="邮箱号"
            placeholder="请输入您的邮箱号"
            clearable
            @keyup.enter="login"
        />
        <!-- 密码 -->
        <v-text-field
            v-model="form.password"
            class="mt-7"
            label="密码"
            placeholder="请输入您的密码"
            @keyup.enter="login"
            :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
            :type="show ? 'text' : 'password'"
            @click:append="show = !show"
        />
        <!-- 按钮 -->
        <v-btn
            class="mt-7"
            block
            color="blue"
            style="color:#fff"
            @click="login"
        >
          登录
        </v-btn>
        <!-- 注册和找回密码 -->
        <div class="mt-10 login-tip">
          <span @click="openRegister">立即注册</span>
          <span @click="openForget" class="float-right">忘记密码?</span>
        </div>
        <div class="social-login-title">社交账号登录</div>
        <div class="social-login-wrapper">
          <!-- 微博登录 -->
          <a
              class="mr-3 iconfont iconweibo"
              style="color:#e05244"
              @click="weiboLogin"
          />
          <!-- qq登录 -->
          <a class="iconfont iconqq" style="color:#00AAEE" @click="qqLogin('qq')"/>

<!--          百度登录-->
          <img @click="baiduLogin('baidu')" class="other" src="../../assets/img/baidu.png"/>
        </div>
      </div>
    </v-card>
  </v-dialog>
</template>

<script>
import request from '../../utils/request'
import {activeRouter} from "@/utils/permission";


export default {
  data: function () {
    return {
      form: {
        username: "",
        password: "",
      },
      show: false
    };
  },
  created() {
    if (sessionStorage.getItem("user") === null) {
      this.$store.state.loginFlag = true;
    }
  },
  mounted() {

    // 获取地理位置
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      // if(this.getStatus() == BMAP_STATUS_SUCCESS){
      const province = r.address.province
      const city = r.address.city
      localStorage.setItem("location", province + city)
      // }
    });
  },


  computed: {
    loginFlag: {
      set(value) {
        this.$store.state.loginFlag = value;
      },
      get() {
        return this.$store.state.loginFlag;
      }
    },
    isMobile() {
      const clientWidth = document.documentElement.clientWidth;
      if (clientWidth > 960) {
        return false;
      }
      return true;
    }
  },
  methods: {
    openRegister() {
      this.$store.state.loginFlag = false;
      this.$store.state.registerFlag = true;
    },
    openForget() {
      this.$store.state.loginFlag = false;
      this.$store.state.forgetFlag = true;
    },
    login() {
      var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!reg.test(this.form.username)) {
        this.$toast({type: "error", message: "邮箱格式不正确"});
        return false;
      }
      if (this.form.password.trim().length == 0) {
        this.$toast({type: "error", message: "密码不能为空"});
        return false;
      }


      request.post('/user/login', this.form).then(res => {
        console.log(res)

        if (res.code === 20000) {
          this.$toast({type: "success", message: "登录成功"});
          sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
          this.$store.commit("login", res.data);
          this.$store.commit("closeModel");
          // this.$store.commit("login", res.data);
          // this.$router.push("/") //登录成功之后进行页面跳转
          const permissions = res.data.permissions;
          activeRouter(permissions)
          this.$router.go(0)
          this.loginFlag = false
        } else {
          this.$toast({type: "error", message: res.msg})
        }

        this.form = {}
      })


      /*  const that = this;
        // eslint-disable-next-line no-undef
        var captcha = new TencentCaptcha(this.config.TENCENT_CAPTCHA, function(
          res
        ) {*/
      /* if (res.ret === 0) {
         //发送登录请求
         let param = new URLSearchParams();
         param.append("username", that.username);
         param.append("password", that.password);
         that.axios.post("/api/login", param).then(({ data }) => {
           if (data.flag) {
             that.username = "";
             that.password = "";
             that.$store.commit("login", data.data);
             that.$store.commit("closeModel");
             that.$toast({ type: "success", message: data.message });
           } else {
             that.$toast({ type: "error", message: data.message });
           }
         });
       }
     });
     // 显示验证码
     captcha.show();*/
    },
    // 第三方登录
    qqLogin(value) {
      if (value == 'qq') {
        var _this = this;
        request.get('/qq/oauth').then(resp => {
          console.log(resp)
          //window.open(resp.data.result, "_blank")
          var width = width || 900;
          var height = height || 540;
          var left = (window.screen.width - width) / 2;
          var top = (window.screen.height - height) / 2;
          var win = window.open(resp.data, "_self",
              "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=" +
              left + ", top=" + top + ", width=" + width + ", height=" + height);
          console.log(_this)
          console.log(win)
          //监听登录窗口是否关闭,登录成功后 后端返回关闭窗口的代码
          // var listener = setInterval(function () {
          //   //监听窗口是否关闭
          //   if (win.closed) {
          //     //进入这个if代表后端验证成功!直接跳转路由
          //     clearInterval(listener);//关闭监听
          //     //跳转路由
          //     var path = _this.$route.query.redirect;
          //     console.log("================>",_this.$route)
          //     console.log("========path========>",path)
          //     _this.$router.replace({
          //       path:
          //           path === "/" || path === undefined ? "/admin/dashboard" : path
          //     });
          //     _this.$router.go(0) //刷新
          //   }
          // }, 500)
        }).catch(fail => {
          console.error(fail)
        })
      }
    },

    weiboLogin() {
      //保留当前路径
      this.$store.commit("saveLoginUrl", this.$route.path);
      window.open(
          "https://api.weibo.com/oauth2/authorize?client_id=" +
          this.config.WEIBO_APP_ID +
          "&response_type=code&redirect_uri=" +
          this.config.WEIBO_REDIRECT_URI,
          "_self"
      );
    },

    //百度登录
    baiduLogin(value){
      if(value=='baidu'){
        const  _this=this;
        console.log("这是百度登录=====》baidu")
        request.get("/baidu/oauth/url").then(resp=>{
          console.log(resp)
          console.log(_this)
          window.open(resp.data)
          // window.location.href=resp.data
          // var width = width || 900;
          // var height = height || 540;
          // var left = (window.screen.width - width) / 2;
          // var top = (window.screen.height - height) / 2;
          // var win = window.open("resp.data", "_self",
          //     "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=" +
          //     left + ", top=" + top + ", width=" + width + ", height=" + height);
          // console.log(_this)
          // console.log(win)
        })
      }
    }
  }
};
</script>

<style scoped>
.social-login-title {
  margin-top: 1.5rem;
  color: #b5b5b5;
  font-size: 0.75rem;
  text-align: center;
}

.social-login-title::before {
  content: "";
  display: inline-block;
  background-color: #d8d8d8;
  width: 60px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
}

.social-login-title::after {
  content: "";
  display: inline-block;
  background-color: #d8d8d8;
  width: 60px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
}

.social-login-wrapper {
  margin-top: 1rem;
  font-size: 2rem;
  text-align: center;
}

.social-login-wrapper a {
  text-decoration: none;
}

.other {
  position: relative;
  top: 4px;
  left: 9px;
  width: 32px;

  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
  text-align: center;
}
</style>
